<template>
  <div id="app">
    单据号:
    <el-input v-model="form.purchaseNumber" style="width:160px;"></el-input>供应商:
    <el-select v-model="form.supplierId" placeholder="请选择">
      <el-option v-for="bean in supplierList" :label="bean.name" :key="bean.id" :value="bean.id"></el-option>
    </el-select>应付金额:
    <el-input v-model="form.amountPayable" style="width:120px;"></el-input>实付金额:
    <el-input v-model="form.amountPaid" style="width:120px;"></el-input>进货日期:
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="form.purchaseDate"
      style="width:180px;"
    ></el-date-picker>
    <br />
    <br />备 注:
    <el-input v-model="form.remarks" style="width:800px;"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    是否付款:
    <el-select v-model="form.state" placeholder="请选择" style="width:100px">
      <el-option v-for="bean in stateList" :label="bean.name" :key="bean.id" :value="bean.id"></el-option>
    </el-select>
    <el-button type="primary" size="medium" @click="addPurchase">保 存</el-button>

    <br />
    <br />
    <br />
    <br />
    <br />
    <el-button type="success" size="medium" @click="add">添加商品</el-button>
    <el-button type="danger" size="medium" @click="del">删除商品</el-button>

    <!-- 商品信息对话框 -->
    <el-dialog title="商 品 信 息" :visible.sync="addFlag">
      <el-tree
        :data="data2"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-expanded-keys="checkedKeys"
        :default-checked-keys="checkedKeys"
        :props="defaultProps"
        style="width:200px;float:left;"
        @check-change="getId"
      ></el-tree>商品名称:
      <el-input v-model="name" style="width:180px;" placeholder="请输入商品名称"></el-input>
      <el-button type="infor" size="medium" @click="getGoodsList(1)">查 询</el-button>
      <el-table :data="goodsList" @row-click="openDetails">
        <el-table-column prop="id" label="编号" width="50"></el-table-column>
        <el-table-column prop="code" label="商品编码" width="80"></el-table-column>
        <el-table-column prop="name" label="商品名称" width="140"></el-table-column>
        <el-table-column prop="model" label="型号" width="80"></el-table-column>
        <el-table-column prop="bname" label="类别" width="80"></el-table-column>
        <el-table-column prop="unit" label="单位" width="50"></el-table-column>
        <el-table-column prop="lastPurchasingPrice" label="上次进价" width="80"></el-table-column>
        <el-table-column prop="purchasingPrice" label="成本均价" width="80"></el-table-column>
        <el-table-column prop="inventoryQuantity" label="库存数量" width="80"></el-table-column>
        <el-table-column prop="sellingPrice" label="销售价格" width="80"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @current-change="getGoodsList"
        :current-page="pagination.pageNum"
        :page-count="pagination.pages"
      ></el-pagination>
    </el-dialog>
    <!-- 对话框 -->
    <el-dialog title="商品信息" :visible.sync="Flag">
      <el-form :model="updBean">
        <el-form-item label="商品编码" :label-width="formLabelWidth">
          <el-input v-model="updBean.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="updBean.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品型号" :label-width="formLabelWidth">
          <el-input v-model="updBean.model" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品单位" :label-width="formLabelWidth">
          <el-input v-model="updBean.unit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上次进价" :label-width="formLabelWidth">
          <el-input v-model="updBean.lastPurchasingPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="当前库存" :label-width="formLabelWidth">
          <el-input v-model="updBean.inventoryQuantity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单价" :label-width="formLabelWidth">
          <el-input v-model="updBean.sellingPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input-number v-model="updBean.num" :min="1" :max="100" @change="handleChange"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Flag = false">取 消</el-button>
        <el-button type="primary" @click="addPurchaseGoods">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog title="商品信息" :visible.sync="updateFlag">
      <el-form :model="editBean">
        <el-form-item label="商品编码" :label-width="formLabelWidth">
          <el-input v-model="editBean.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="editBean.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品型号" :label-width="formLabelWidth">
          <el-input v-model="editBean.model" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品单位" :label-width="formLabelWidth">
          <el-input v-model="editBean.unit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上次进价" :label-width="formLabelWidth">
          <el-input v-model="editBean.lastPurchasingPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="当前库存" :label-width="formLabelWidth">
          <el-input v-model="editBean.inventoryQuantity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单价" :label-width="formLabelWidth">
          <el-input v-model="editBean.sellingPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input-number v-model="editBean.num" :min="1" :max="100" @change="handleChange"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFlag = false">取 消</el-button>
        <el-button type="primary" @click="addPurchaseGoods">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 进货商品表格 -->
    <el-table :data="GoodsPurchaseList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="code" label="商品编码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="model" label="型号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unit" label="单位" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sellingPrice" label="单价" show-overflow-tooltip></el-table-column>
      <el-table-column prop="num" label="数量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="total" label="总金额" show-overflow-tooltip v-bind:formatter="getSum"></el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="info" v-on:click="getMoney(scope.row)">获取应/已付金额</el-button>
          <el-button type="info" v-on:click="update(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
var quan;
var f = 0;
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      formLabelWidth: "120px",
      supplierList: [],
      stateList: [
        {
          id: "1",
          name: "已付"
        },
        {
          id: "2",
          name: "未付"
        }
      ],
      form: {
        purchaseNumber: "",
        supplierId: "",
        amountPayable: "",
        amountPaid: "",
        purchaseDate: "",
        remarks: "",
        state: ""
      },
      addFlag: false,
      goodsList: [],
      name: "",
      pagination: {},
      Flag: false,
      updBean: {
        code: "",
        name: "",
        model: "",
        unit: "",
        lastPurchasingPrice: "",
        inventoryQuantity: "",
        sellingPrice: "",
        typeId: "",
        id: "",
        num: 1
      },
      num: 1,
      GoodsPurchaseList: [],
      editBean: {},
      updateFlag: false,
      checkedKeys: [],
      data2: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      typeId: null
    };
  },
  mounted: function() {
    quan = this;
    quan.getSupplierList();
    quan.orderFormatter();
    quan.getCurrentMonthFirst();
    quan.getTreeList();
  },
  methods: {
    getId() {
      quan.getCheckedNodes();
    },
    getCheckedNodes: function() {
      var ridsa = this.$refs.tree.getCheckedKeys().join(","); // 获取当前的选中的数据[数组] -id, 把数组转换成字符串
      var rids = ridsa;
      var arr = rids.split(","); //  把字符串转换成数组
      arr = [...new Set(arr)]; // 数组去重
      rids = arr.join(","); // 把数组转换成字符串
      // console.log(rids);
      quan.typeId = rids;
      quan.getGoodsList(1);
    },
    getTreeList: function() {
      quan.axios
        .get("http://localhost:9999/biz/tGoodstype/getTypeList", {
          params: {
            access_token: localStorage.getItem("access_token")
          }
        })
        .then(function(res) {
          quan.data2 = res.data.obj;
        });
    },
    getSupplierList: function() {
      quan.axios
        .get("http://localhost:9999/biz/purchase/getSupplier", {
          params: {
            access_token: localStorage.getItem("access_token")
          }
        })
        .then(function(res) {
          quan.supplierList = res.data.obj;
        });
    },
    //生成订单号
    orderFormatter: function() {
      // 时间戳
      var time = new Date();
      // 年
      var year = String(time.getFullYear());
      // 月
      var mouth = String(time.getMonth() + 1);
      // 日
      var day = String(time.getDate());
      // 时
      var hours = String(time.getHours());
      if (hours.length < 2) {
        hours = "0" + hours;
      }
      // 分
      var minutes = String(time.getMinutes());
      if (minutes.length < 2) {
        minutes = "0" + minutes;
      }
      // 秒
      var seconds = String(time.getSeconds());
      if (seconds.length < 2) {
        seconds = "0" + seconds;
      }
      var str = "JH" + year + mouth + day + hours + minutes + seconds;
      quan.form.purchaseNumber = str;
    },
    add: function() {
      quan.addFlag = true;
      quan.getGoodsList();
    },
    openDetails: function(row) {
      quan.Flag = true;
      quan.updBean = row;
    },
    getGoodsList: function(pageNo) {
      quan.axios
        .get("http://localhost:9999/biz/tGoods/getGoodsList", {
          params: {
            access_token: localStorage.getItem("access_token"),
            pageNo: pageNo,
            pageSize: 10,
            name: quan.name,
            typeId: quan.typeId
          }
        })
        .then(function(res) {
          quan.goodsList = res.data.obj.list;
          quan.pagination = res.data.obj;
        });
    },
    handleChange(value) {
      quan.updBean.num = value;
    },
    addPurchase: function() {
      var data = {
        purchaseNumber: quan.form.purchaseNumber,
        supplierId: quan.form.supplierId,
        amountPayable: quan.form.amountPayable,
        amountPaid: quan.form.amountPaid,
        purchaseDate: quan.form.purchaseDate,
        remarks: quan.form.remarks,
        state: quan.form.state,
        username: localStorage.getItem("username"),
        list: quan.GoodsPurchaseList
      };
      var $this = this;
      quan
        .axios({
          method: "post",
          url:
            "http://localhost:9999/biz/purchase/purchaseAndWarehousing?access_token=" +
            localStorage.getItem("access_token"),
          data: data
        })
        .then(function(res) {
          $this.$message(res.data.msg);
          quan.form = {};
          quan.GoodsPurchaseList = [];
        });
    },
    update: function(row) {
      quan.updateFlag = true;
      quan.editBean = row;
      quan.del();
    },
    del: function() {
      quan.GoodsPurchaseList = [];
    },
    addPurchaseGoods: function() {
      quan.GoodsPurchaseList.push(quan.updBean);
      quan.Flag = false;
      quan.addFlag = false;
      quan.updateFlag = false;
    },
    getSum: function(row) {
      var sum1 = 0;
      sum1 = row.num * row.sellingPrice;
      return sum1;
    },
    //默认选中当前日期
    getCurrentMonthFirst: function() {
      var date = new Date();
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      quan.form.purchaseDate = date.getFullYear() + "-" + month + "-" + day;
    },
    getMoney: function(row) {
      f = f + row.num * row.sellingPrice;
      quan.form.amountPaid = f;
      quan.form.amountPayable = f;
    }
  }
};
</script>